import { AtImagePicker } from 'taro-ui'
import { isAlipay } from '@/utils'
import { View } from '@tarojs/components'
import React, { useCallback } from 'react'
import imgUploader from '@/utils/upload'
import './index.scss'

const ImgPicker = (props) => {
  const { onChange } = props

  const handleClickImg = useCallback(() => {
    my.chooseImage({
      sourceType: ['camera', 'album'],
      count: 2,
      success: (res) => {
        const resultFiles = res.apFilePaths.map((item) => ({
          url: item,
          file: item
        }))
        imgUploader.uploadImageFn(resultFiles).then((res) => {})
      },
      fail: () => {}
    })
  }, [])

  return (
    <View className='sp-img-picker'>
      <View className='sp-img-picker__flexbox'>
        <View className='sp-img-picker__flexbox-item' onClick={handleClickImg}>
          <View className='sp-img-picker-item choose-btn'>
            <View className='add-bar'></View>
            <View className='add-bar'></View>
          </View>
        </View>
      </View>
    </View>
  )
}

export default isAlipay ? ImgPicker : <View></View>
